<template>
	<view>
		<view class="order-details">
			<view class="header-bg"></view>
			<view class="main">
				<view class="header">
					<view class="item" v-if="orderDetail.findOrder.order_status == 0">
						<view class="white lg m-b-10">等待买家付款</view>
					</view>
					<view class="item" v-if="orderDetail.findOrder.order_status == 1">
						<view class="white lg m-b-10">待发货</view>
						<view class="white sm">您的商品正在打包中，请耐心等待…</view>
					</view>
					<view class="item" v-if="orderDetail.findOrder.order_status == 2">
						<view class="white lg m-b-10">待收货</view>
						<view class="white sm">您的商品正在路中，请耐心等待…</view>
					</view>
					<view class="item" v-if="orderDetail.findOrder.order_status == 3">
						<view class="white lg m-b-10">已完成</view>
						<view class="white sm">商品已签收，期待再次购买！</view>
					</view>
					<view class="item" v-if="orderDetail.findOrder.order_status == 4">
						<view class="white lg m-b-10">订单已关闭</view>
						<!-- <view class="white sm">原因：超时未支付</view> -->
					</view>
				</view>
				<view class="address-wrap flex contain">
					<image class="icon-md m-r-20" src="/bundle/static/image/icon_address.png"></image>
					<view class="address">
						<view>
							<text class="name md m-r-10">{{orderDetail.findOrder.consignee}}</text>
							<text class="phone md">{{orderDetail.findOrder.mobile}}</text>
							<view class="area sm m-t-10 lighter">{{orderDetail.findOrder.delivery_address}}</view>
						</view>
					</view>
				</view>



				<view class="goods contain">
					<view class="flex">
						<u-image :src="orderDetail.findOrder.image" border-radius="10" width="160" height="160"></u-image>
						<view class="goods-info flex-1 m-l-20">
							<view class="goods-name line-2">{{ orderDetail.findOrder.order_name }}</view>
							<view class="flex row-between">
								<view class="goods-price primary m-t-10">
									
								</view>
								<view class="lighter">×1</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="order-info contain">

					<view class="item flex">
						<view class="title">中奖时间</view>
						<view class="black">{{orderDetail.draw_time}}</view>
					</view>
					<view v-if="orderDetail.findOrder.shipping_time" class="item flex">
						<view class="title">发货时间</view>
						<view class="black">{{orderDetail.findOrder.shipping_time }}</view>
					</view>
					<view v-if="orderDetail.findOrder.shipping_name" class="item flex">
						<view class="title">物流公司</view>
						<view class="black">{{orderDetail.findOrder.shipping_name }}</view>
					</view>
					<view v-if="orderDetail.findOrder.invoice_no" class="item flex">
						<view class="title">快递单号</view>
						<view class="black">{{orderDetail.findOrder.invoice_no }}</view>
					</view>

				</view>
			</view>
		</view>
		
		<!-- <float-tab></float-tab> -->
	</view>
</template>

<script>

	export default {
		data() {
			return {
				orderDetail:{}
				
			};
		},

		onLoad: function(options) {
			this.orderDetail=JSON.parse(this.$Route.query.obj)
		},
		onUnload() {
			uni.$off('payment', this.payCallback)
		},
		methods: {
			
		},
		computed: {

		}
	};
</script>
<style lang="scss">
	.order-details {
		position: relative;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.contain {
			margin: 0 20rpx 20rpx;
			border-radius: 14rpx;
			background-color: #fff;
		}

		.header-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 200rpx;
			background-color: $-color-primary;
			z-index: 0;

		}

		.header {
			padding: 24rpx 40rpx;
		}

		.main {
			position: relative;
			z-index: 1;
		}

		.goods {
			padding: 30rpx 24rpx;

			.goods-name {
				line-height: 40rpx;
				height: 80rpx;
			}
		}

		.address-wrap {
			height: 164rpx;
			padding: 0 24rpx;
		}

		.order-info {
			padding: 12rpx 0;

			.item {
				padding: 12rpx 24rpx;

				.title {
					width: 180rpx;
					flex: none;
				}
			}
		}

		.price {
			padding: 24rpx 0;

			&>view {
				height: 60rpx;
				padding: 0 24rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			padding: 0 24rpx;
			box-sizing: content-box;
			padding-bottom: env(safe-area-inset-bottom);

			.plain {
				border: 1px solid #BBBBBB;

				&.red {
					border: 1px solid $-color-primary;
				}
			}
		}

	}
</style>
